<!--  -->
<template>
    <div class="team-order-detail">
        <Nav title="订单详情">
            <template v-slot:left>
                <span class="back" @click="$router.back()"></span>
            </template>
        </Nav>
        <div class="divide-line"></div>
        <div class="order-detail f-12">
            <div class="title flex justify-between aligin-center">
                <img class="avator" :src="orderInfo.avatar_url" alt="">
                <span class="ml-10 mr-auto">购买人:{{orderInfo.nickname}}</span>
               
                <span class="order-status"  :class="orderInfo.luck_user==0?'color-gray':orderInfo.luck_user?'':'color-green'" >{{orderInfo.luck_user==0?'未中奖':orderInfo.luck_user?'中奖':'待开奖'}}</span>
            </div>  
            <div class="order-info">
                <div>活动名称: {{orderInfo.name}}</div>
                <div class="mt-10">订单编号:{{orderInfo.order_no}}</div>
                <div class="mt-10">订单金额:￥{{orderInfo.total_money}}</div>
                <div class="mt-10">获得能量值:{{orderInfo.give_power}}</div>
            </div>
            <router-link tag="div" :to="{name:'teamRewardDetail',params:{id:$route.params.id}}" class="reward" v-if="orderInfo.luck_user==1 &&orderInfo.type==1" >
                <div class="tip">我的奖励</div>
                <div class="mt-20 flex my-reward">
                    <img class="reward-img" :src="orderInfo.pid_rewards.reward_img" alt="">
                    <div class="pt-6">
                        <div>{{orderInfo.pid_rewards.reward_name}}</div>
                        <div class="mt-16 color-gray">金额: ¥{{orderInfo.pid_rewards.reward_price}}</div>
                    </div>
                </div>
            </router-link>
            <div class="product-info">
                <div>购买商品详情：</div>
                <div class="product-wrapper mt-10">
                <div class="mt-18 ml-8 flex ">
                    <img class="product-img" :src="orderInfo.pic_cover_small" alt="">
                    <div class="flex ml-10 flex-1 flex-column">
                        <div class="flex justify-between">
                            <span>{{orderInfo.goods_name}}</span>
                        </div>
                        <div class="mt-14 flex justify-between">
                            <span class="color-gray">¥{{orderInfo.price}}</span>
                            <span class="color-gray">X {{orderInfo.num}}</span>
                        </div>
                    </div>
                </div>
                <div class="total">总计:{{orderInfo.total_money}}</div>
                </div>
                <div class="check-activity flex justify-center aligin-center" @click="toActivity">查看活动</div>
            </div>
        </div>
    </div>
</template>

<script>
import Nav from "../../components/Nav";
import {teamOrderDetail} from "../../api/api"
export default {
  components: { Nav },
  data() {
    return {
        orderInfo:{}
    };
  },
  computed: {},
  watch: {},
  methods: {
    toActivity(){ 
      this.$router.push({ name: "detail", params: { id: this.orderInfo.ag_id } });
    }
  },
  created() {},
  mounted() {
      teamOrderDetail({gau_id:this.$route.params.id}).then(({data:{result}})=>{
          this.orderInfo=result
      })
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.flex-1{
    flex: 1;
}
.team-order-detail {
  .order-detail {
    padding: 0 13px 12px;
  }
  .title {
    height: 44px;
    border-bottom: 1px solid #eaeaea;
    .avator {
      height: 26px;
      width: 26px;
      border-radius: 50%;
    }
    .order-status{
        font-size: 13px;
        color: #EF5665;
    }
    .color-gray{
        color: #7C7C7C;
    }
    .color-green{
        color:#058402;
    }
  }
  .order-info {
    padding: 8px 0 16px 10px;
    border-bottom: 1px solid #eaeaea;
  }
  .reward {
    padding: 13px 0 20px 9px;
    border-bottom: 1px solid #eaeaea;
    .tip {
      font-size: 13px;
    }
    .my-reward{
        padding: 8px 0 10px 9px;
        background: #F8F8F8;
    }
    .reward-img {
      margin-left: 9px;
      margin-right: 11px;
      width: 58px;
      height: 58px;
    }
  }
  .product-info {
    padding: 13px 11px 12px 9px;
    .product-wrapper{
        padding: 7px 5px 10px 8px;
         background: #F8F8F8;
    }
    .total {
      margin-top: 14px;
      font-size: 13px;
      text-align: right;
    }
    .product-img {
      height: 40px;
      width: 40px;
    }
    .check-activity {
      margin: 29px auto 0;
      width: 75px;
      height: 24px;
      color: #fff;
      font-size: 12px;
      background: rgba(239, 86, 101, 1);
      border-radius: 3px;
    }
  }
}
</style>